<template>
	<div :class="[align,'nowrap']" v-if='pager && pager?.data?.length > 0'>
		<Pagination
			v-model:current 	= 'pager.page'
			v-model:pageSize 	= 'pager.size'
			:total 				= 'pager.total'
			:pageSizeOptions 	= 'pag?.pageSizeOptions ?? (config?.paging?.pageSizeOptions ?? pageSizeOptions)'
			:hideOnSinglePage 	= 'pager.data.length === 0  || total / ($config?.paging?.pageSize || 10) <= 1'
			:size 				= "pag?.size ?? 'small'"
			:showLessItems 		= "pag?.showLessItems ?? true"
			:showQuickJumper 	= "pag?.showQuickJumper ?? true"
			:showSizeChanger 	= "pag?.showSizeChanger ?? true"
			@change 			= 'change'
			@showSizeChange 	= 'showSizeChange'
		/>
	</div>
</template>

<script>
	import { Pagination } from 'ant-design-vue'
	export default {
		components:{ Pagination },
		props: {
			pager				: { type:Object, default:{ model:{}, pager:{page:1, size:0, total_items:0, data:[]}  } },						// 分页数据
			pageSizeOptions 	: { type:Array, default:['10', '20', '50', '100', '200', '500', '1000']},	// 指定每页可以显示多少条
			align 				: { type:String, default: 'fxr' },							// 对齐
			pag 				: { type:[ Object, Number, Boolean], default: {}}							// 对齐
		},
		setup(props, context){
			return {
				config: $config,
				change: (page, size) => context.emit('change', page, size),
				showSizeChange: (page, size) => context.emit('change', page, size)
			}
		}
	}
</script>
